TypeScript Cheatsheet

March 25, 2024

Here is a complete TypeScript cheatsheet that covers everything you need to know about TypeScript. You can use this cheatsheet as a quick reference guide for TypeScript development.

TypeScript Basics

Install TypeScript

npm install -g typescript

Compile TypeScript File

tsc filename.ts

Run TypeScript File

node filename.js

TypeScript Comments

// Single Line Comment

/*
Multi Line Comment
*/

TypeScript Types

TypeScript Basic Types

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let fruits: Array<string> = ["Apple", "Banana"];
let x: [string, number] = ["hello", 10];
let notSure: any = 4;
let u: undefined = undefined;
let n: null = null;

TypeScript Type Assertion

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

TypeScript Type Inference

let a = 10; // number
let b = "Hello"; // string
let c = true; // boolean

TypeScript Functions

TypeScript Function

function add(x: number, y: number): number {
  return x + y;
}

TypeScript Optional Parameters

function buildName(firstName: string, lastName?: string): string {
  if (lastName) return firstName + " " + lastName;
  else return firstName;
}

TypeScript Default Parameters

function calculateDiscount(price: number, discount: number = 0.10): number {
  return price - price * discount;
}

TypeScript Classes

TypeScript Class

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    return "Hello, " + this.name;
  }
}

TypeScript Inheritance

class Employee extends Person {
  empCode: number;
  constructor(name: string, empCode: number) {
    super(name);
    this.empCode = empCode;
  }
  getSalary() {
    return "Salary is 10000";
  }
}

TypeScript Access Modifiers

class Employee {
  private empCode: number;
  protected empName: string;
  public empDept: string;
}

TypeScript Interfaces

TypeScript Interface

interface Person {
  name: string;
  age: number;
}

TypeScript Interface Methods

interface Person {
  name: string;
  age: number;
  greet(): string;
}

TypeScript Interface Optional Properties

interface Person {
  name: string;
  age?: number;
}

TypeScript Generics

TypeScript Generics Function

function identity<T>(arg: T): T {
  return arg;
}

TypeScript Generics Interface

interface GenericIdentityFn<T> {
  (arg: T): T;
}

TypeScript Generics Class

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

TypeScript Enums

TypeScript Enum

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

TypeScript Reverse Enum

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let direction: string = Direction[2];
console.log(direction); // Down

TypeScript Decorators

TypeScript Decorator

function log(target: any, key: string) {
  console.log(key + " was called");
}

class Calculator {
  @log
  add(x: number, y: number): number {
    return x + y;
  }
}

TypeScript Decorator Factory

function log(): MethodDecorator {
  return function (target: any, key: string) {
    console.log(key + " was called");
  };
}

class Calculator {
  @log()
  add(x: number, y: number): number {
    return x + y;
  }
}

TypeScript Modules

TypeScript Module Export

export function add(x: number, y: number): number {
  return x + y;
}

export const PI = 3.14;

TypeScript Module Import

import { add, PI } from "./math";

console.log(add(10, 20));
console.log(PI);

TypeScript Namespaces

TypeScript Namespace

namespace Math {
  export function add(x: number, y: number): number {
    return x + y;
  }
}

TypeScript Namespace Import

/// <reference path="math.ts" />

console.log(Math.add(10, 20));

Conclusion

This TypeScript cheatsheet covers all the essential TypeScript concepts that you need to know. You can use this cheatsheet as a quick reference guide for TypeScript development. Happy coding!